// 你需要webpack帮你干点什么
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
// const MiniCssExtractPlugin = require('mini-css-extract-plugin');

module.exports = {
	// 通过选择 development 或 production 之中的一个，来设置 mode 参数，你可以启用相应模式下的 webpack 内置的优化
	mode: 'development',
	// 入口起点(entry point)指示 webpack 应该使用哪个模块，来作为构建其内部依赖图的开始。进入入口起点后，webpack 会找出有哪些模块和库
	entry: './src/main.js',
	// output 属性告诉 webpack 在哪里输出它所创建的 bundles，以及如何命名这些文件，默认值为 ./dist。基本上，整个应用程序结构，
	// 都会被编译到你指定的输出路径的文件夹中
	output: {
		path: path.resolve(__dirname, 'dist'),
		filename: 'js/bundle.js',
		// 会得到默认打包文件，文件名字为main
		// filename:'js/[name].js'
	},
	plugins: [
		new HtmlWebpackPlugin({
			template: './src/index.html',
			// 只有production模式能设置
			// minify: {
			// 	removeAttributeQuotes: true, //树摇算法
			// 	collapseWhitespace: true
			// }
		})
		// ,
		// new MiniCssExtractPlugin({
		// 	filename: './src/css/style.css'
		// })
	],
	devServer: {
		port: 5000,
		compress: true,
		open: true,
		client: {
			progress: true
		}
	},
	module: {
		rules: [{
				test: /\.css$/,
				use: ['style-loader', 'css-loader'] //从右边往左执行
			},
			{
				test: /\.less$/,
				use: ['style-loader', , 'css-loader', 'less-loader'] //从右边往左执行
			}
		]
	}

}
